cc-pocket · mobile ui 2.0 · zero-state first run · v1

Connect your computer · Pairing 2.0

Activation needs three things to line up: the daemon installed on a computer, cc-pocket-daemon pair run there, and the code it prints entered here. Today only the third step has a screen. This adds the install guide in front of it and rebuilds every pairing failure as a card that says what to do next. Both frames are the same live component at 390 × 844.

live prototype
390 × 844 · 1:1
one compose layout
ios + android
no new tokens
targets ≥ 44 pt
A

Walk the flow

Starts on the install guide, as a brand-new user does. The rail is host chrome for review — not product UI.
What changed
The computer requirement is the first screen, not a footnote

A new user meets a two-step journey — install, then pair — before any input. The six-digit field is one tap away and still labelled for people who already installed, so returning users are not routed through a tutorial.

Failures became cards with an action

Each error names the cause, carries the fix — a fresh code, a network check, the right link — and ends in a control. Danger is a tinted border and a square mark, never a filled red panel.

Help exists before success

Both screens carry Help & support in the bottom caption, and the network card repeats it. Nothing about it requires a paired computer or a sign-in.

Acceptance paths, wired
01Switch platform: the command changes and the Windows note takes over from the quiet prerequisite line.
02Copy either command — install or cc-pocket-daemon pair — and the row confirms in place.
03Tap the code field six times, then Pair computer → verifying → paired → hand-off. The camera is never touched.
04Enter the expired card, tap Try again: the field clears and returns to idle with the same routes underneath.
05From pairing, Install it first returns to step 1 — the loop between the two screens closes in both directions.
Prototype boundaries

Scan, paste, LAN, demo, guide, help and Projects open a stub that names the surface and stops — all seven already exist. Copy reports success without touching the clipboard. Install commands are placeholders for the real distribution channels.

B

Screen 1 · Connect your computer

The landing for anyone with zero paired computers.
01 · default · macOS
Wordmark, display title, one-line model. Then two numbered steps, one filled CTA, and three quiet routes in falling weight: enter code, demo, then the caption pair. Nothing is illustrated.
02 · Windows tab
The prerequisite stops being a quiet line and becomes an attention-marked note, because on Windows the CLI is the step people miss. Attention, not danger — nothing has failed yet.
03 · scrolled · compact
The display title collapses into a hairline bar that keeps the wordmark and the screen name, and the CTA docks above the home indicator so the primary action never scrolls out of reach.
Structure
Two steps, numbered once

Accent-subtle circles, 24 pt, mono numerals. The journey is short enough to read as a whole screen, which is the point: the user learns a computer is involved before they look for a code.

Segment control, not a dropdown

Three platforms are visible at once, 44 pt each inside a 50 pt track. Selection is a raised fill plus a border — it survives a monochrome screenshot.

Commands stay copyable and breakable

Mono, 13 pt, word-break: break-all, with the copy affordance in a 44 pt box that hangs into the padding so the glyph stays optically on the line.

Strings are short and structural

No row has a fixed height and every label wraps, so zh strings and 200% type grow the row rather than clipping. Step labels, CTA and captions are single clauses.

C

Screen 2 · Pairing 2.0 · six states

Code-first and camera-free stays. The status region under the CTA is the redesign.
04 · idle
Pair stays inert until six digits exist. Below the hairline: the three alternate routes as peers, the daemon command as help, and the new line back to installing.
05 · verifying
Boxes lock and lose the caret, the CTA goes inert, and a 2 pt indeterminate bar sits above the words. The reason for the lock is written, not implied.
06 · expired or invalid code
The most common failure, so the fix is embedded: the command to run again, copyable in place, then Try again — which clears the field and refocuses it rather than leaving a stale code behind.
07 · network unreachable
Names the phone's own network as the suspect, including VPN and proxy, and blames neither the code nor the computer. Retry is canonical; Help sits under it as the second exit.
08 · invalid link or QR
Arrives from the scan and paste routes, so both are offered back as equals. The body names what a real pairing link looks like instead of calling the input wrong.
09 · success
A moment, not a screen: accent check, the computer's own name in mono, and the hand-off said out loud. The routes and the install help disappear — there is nothing left to choose.
Card rules
One shape, three failures

Surface fill, a danger-tinted hairline, a 9 pt square mark, a titled sentence, then controls. Same geometry every time, so the difference a user reads is the words.

Never colour alone

Square for danger, rotated square for attention, ring for in-flight, circle-check for success — each beside a written state. The cards also carry role="alert"; verifying and success are polite live regions.

Every card ends in a control

Try again, Retry, Scan QR, Paste link — 48 pt outlined, full-width or paired. No card leaves the user to work out the next move, and none of them is a dead gray caption.

Owned by code
install channel per platform
code lifetime before expiry
hostname shown on success
en / zh strings from resources
D

Light palette proofs

One frame per screen. Same geometry, same marks, light tokens.
10 · connect · light
9:41
cc-pocket

Connect your computer

Your phone drives the AI coding agent that runs on your computer.

1 Install cc-pocket on the computer
macOS Windows Linux
brew install cc-pocket/tap/cc-pocket
Needs the Claude Code CLI on that computer What's that?
2 Pair

Run cc-pocket-daemon pair on the computer — it shows a six-digit code and a QR.

I'm ready — pair now
Already installed? Enter code directly
Explore the demo instead No computer needed
Full setup guide · Help & support
The step circles keep their accent-subtle fill against a warmer paper, and the segment control's selection becomes white-on-surface instead of a raised tint. Nothing else is re-specified.
11 · pair · expired code · light
9:41

Pair a computer

Enter the six-digit code shown on your computer.

4 8 2 1 7 0
Pair computer
That code didn't work

Codes expire after a short while. On the computer, run the command again to get a fresh one:

cc-pocket-daemon pair
Try again
Scan QR code
Paste pairing link
Direct LAN address
The danger hairline and mark darken to hold contrast on paper; the embedded command inverts to white so it still reads as a lower layer inside the card. The routes and the daemon block continue below the fold.
Platform and localisation
One Compose layout, no platform chrome

No back bars, no action sheets, no platform-specific dialogs. The only back affordance is the leading chevron on screen 2, which both systems read the same way.

Targets

Rows 56, buttons 48–52, copy and inline links 44, segments 44. Inline links use vertical padding with negative margins so the hit box reaches 44 without opening the line.

en / zh

Every string here is a single clause with no embedded layout. Commands and hostnames stay untranslated mono; the two long-form sentences are the card bodies, which wrap freely.

Open for review

The three install commands and the Windows CLI sentence are placeholders standing in for whatever the release actually ships. Everything else is existing product truth.